<template>
  <elestatement  
        v-loading="loading"
         :element-loading-text="loadingText"
         element-loading-spinner="el-icon-warning-outline"
         element-loading-background="rgba(0, 0, 0, 0.5)"
          :pop='pop' >
      <slot slot="close"></slot>
      <div class="realblock" style="width:100%;height:100%" slot="content">
        <div class="echarts2or4" :id="cityAvgDataId"></div>
      </div>
  </elestatement>
</template>
<script>
  let echarts = require("echarts");
  let moment = require("moment");
  import elestatement from "@/components/real-time/real-time-module/common/size/Element2x4";
  var Echarts = null;
  export default {
    components: {
      elestatement,
    },
    props:{
      GetData:{},
      isdemo:{
        type:Boolean,
        default:function(){
          return false
        }
      }
    },
    data() {
      return {
        option: {
          grid: {
            left: '8%',
            right: '8%',
            top: '10%',
            bottom: "80px"
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#ffec8c', '#1145c2'],
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#488ad8'
            },
            data: []
          },
          yAxis: [
            {
              position: 'left',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#415f9e'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#515254'
                }
              },
              axisLabel: {
                formatter: '{value}' + '人'
              },
              type: 'value'
            },
            {
              type: 'value',
              position: 'right',
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#153d9c'
                }
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false,
              },
              offset: 0,
              axisLabel: {
                formatter: '{value}' + '元'
              }
            }
          ],
          dataZoom: [
            {
              type: 'slider',
              start: 0,
              end: 100,
              textStyle: {
                color: '#488ad8'
              }
            },
            {
              show: true,
              start: 0,
              end: 100,
              height: 20,
              textStyle: {
                color: '#488ad8'
              }
            },

          ],
          legend: {
            data: ['进入人数','销售金额'],
            top: '5px',
            textStyle: {
              color: '#415f9e'
            },
            inactiveColor: '#4D4D4D'
          },
          series: [
            { 
              name: '',
              data: [],
              type: 'bar',
              barMaxWidth: '20px',
              yAxisIndex: '0',
            },
            {
              name: '',
              data: [],
              type: 'bar',
              barMaxWidth: '20px',
              yAxisIndex: '1',
            }
          ]
        },
        pop: {
          title: "城市数据均值分布图",							//报表标题
          helphint: [
            {title: "客流销售分析", text: ""},				//第一条信息为提示标题 不给text
            {title: "进入人数", text: "：选择的日期跨度内进店总人数"},
            {title: "销售金额", text: "：选择的日期跨度内销售总额"},
          ]
        },
        cityAvgData: {
          xData: ["重庆兰亭新都汇"],
          yData: {
            actual_sales: [null],
            enters: [58]
          }
        },
        realData:{
          company_ids:'',//企业id
          case_ids:'',//案场id
          idsType:0,//企业或案场标记：0：为只选择了企业id，1：为选择了案场id
          start_day:moment(new Date()).format("YYYY-MM-DD"),
          end_day:moment(new Date()).format("YYYY-MM-DD"),
          
        },
        loadingText:'加载中...',
        start_hm:'00:00',
        end_hm:'23:59',
        loading:false,
        global:null,
        xykpis:['enters','actual_sales'],
        cityAvgDataId:Number(
          Math.random()
            .toString()
            .substr(3, 15) + Date.now()
        ).toString(36) + "cityAvgDataId",
        shake:false
      }
    },
    created() {
      
    },
    mounted() {
      this.myChart = echarts.init(document.getElementById(this.cityAvgDataId));
      if(this.isdemo){
        this.option.xAxis.data = ['云视北京分公司','云视上海分公司','云视广州分公司','云视深圳分公司','云视安徽分公司',];
        this.option.series[0].data = ['88888','48888','58888','18888','28888','38888'];
        this.option.series[1].data = ['888888','888888','588888','188888','288888','388888'];
        this.myChart.setOption(this.option, true);
        this.loading=false;
      }
      this.$Bus.$on('WinResize', () => {
        this.myChart.resize();
      });
    },
    beforeDestroy() {
      this.$Bus.$off('WinResize')
    },
    methods: {
      //获取城市均值
      getData() {
        //当选择了案场的时候则不调用该接口
        if (this.realData.idsType == 1) {
          this.myChart.setOption({},true);
          this.loadingText = '选择案场无法查看城市数据';
          this.shake = false
          return
        }
        let tags=0;
        if(this.global.type=='chain')
        {
          tags=2;
        }
        else if(this.global.type=='mall')
        {
          tags=1;
        }
        let indicator_key = ['enters','actual_sales']
        let company_ids = this.realData.company_ids.split(',')
        let url = '/sys/report_new/distribution_avg?group_type=company&tags=' + tags + '&indicator_keys=' + indicator_key + '&sort_key=enters&sort_type=desc' +
          "&start_day=" + this.realData.start_day + "&end_day=" + this.realData.end_day + "&start_hm=" + this.start_hm + "&end_hm=" + this.end_hm;
        let paramse = {
          org_id_list: company_ids,
          org_type:1
        }
        this.$api.post(url, paramse)
        .then(data => {
          if (data) {
            if(data == '10001'){
              this.item_list=[];
              this.loadingText = '无该指标权限';
              this.shake = false
              return
            }
            if (data.data.item_list) {
              let item_list = data.data.item_list;
              let xData = [];
              let yData = {
                enters: [],
                actual_sales: []
              };
              for (let i in item_list) {
                xData.push(item_list[i].company_name)
                yData.enters.push(item_list[i].enters)
                yData.actual_sales.push(item_list[i].actual_sales)
              }
              this.cityAvgData.xData = xData
              this.cityAvgData.yData = yData;
              this.$nextTick(() => {
                this.setOption()
              })
            } else {
              this.cityAvgData.xData = [];
              this.cityAvgData.yData = [];
              this.setOption(true);
            }
          }
          else{
              this.cityAvgData.xData = [];
              this.cityAvgData.yData = [];
              this.setOption(true);
          }
          this.shake = false
        })
        .catch(err => {
           console.log(err);
          this.cityAvgData.xData = [];
          this.cityAvgData.yData = [];
          this.shake = false
          this.setOption(true);
        })
      },
      setOption(isnull=false) {
        if(isnull){
          this.myChart.setOption({},true);
          this.loadingText = '无数据';
          return
        }
        let data = this.cityAvgData;
        this.option.xAxis.data = [];
        this.option.series = [];
        this.option.legend.data = [];
        this.option.xAxis.data = data.xData
        for (let i in data.yData) {
          let obj = {
            name: '',
            data: [],
            type: 'bar',
            barMaxWidth: '20px',
            yAxisIndex: '',
          }
          let name = i == 'enters' ? '进入人数' : '销售金额'

          let yAxisIndex = i == 'enters' ? 0 : 1

          obj.name = name
          obj.yAxisIndex = yAxisIndex
          obj.data = data.yData[i]

          this.option.series.push(obj)
          this.option.legend.data.push(name)
        }
        this.$nextTick(() => {
          this.myChart.setOption(this.option, true);
          this.loading = false;
        })
      },
      
    },
    watch: {
      GetData:{
        handler(val){
          if(this.shake && val.index != 0){
            return
          }
          if(val){
            this.realData = val.realHeaderData;
            this.global = val.global;
            this.loading = true;
            this.shake = true
            if(!this.realData.company_ids.length){
              this.myChart.setOption({},true);
              this.loadingText = '无数据';
              this.shake = false
              return
            }else{
              this.loadingText = '加载中...';
              this.getData();
            }
          }
        },
        deep:true

      }
    },

  };
</script>

<style lang="scss">
  .echarts2or4{
    width: 1150px;
    height: 300px;
  }

</style>
